<template lang="pug">
    nav#nav
        dl.clear.layout-wrap
            dd
                router-link(:to="{name: 'index'}") 首页
            dd
                router-link(:to="{name: 'production'}") 产品与项目
            dd
                router-link(:to="{name: 'index'}") 前景与加盟
            dd
                router-link(:to="{name: 'index'}") 服务与保障
            dd
                router-link(:to="{name: 'index'}") 培训与教育
            dd.pull-group(@click="pulldown", :class="{'pulldown': pullhasdown}")
                a(href="javascript:;") 御医传人门店
                .subMenu
                    ul.subMenu-down
                        li(@click="showAddress")
                            router-link(:to="{name: 'index'}") 直营店地址
                        li
                            router-link(:to="{name: 'index'}") 加盟店地址
            dd
                router-link(:to="{name: 'about'}") 关于御医传人

        //- 地址弹窗
        .poplayer(v-show="showAddr")
            .poplayer-body.addressList
                .addr-header 直营店地址
                    i.addr-close(@click="close")
                ul.addr-body
                    li(v-for="item in addrs") {{item}}

</template>

<script>
export default {
    data() {
        return {
            showAddr: false,
            pullhasdown: false,
            addrs: ['北京', '上海', '广州', '深圳', '中山', '珠海', '佛山', '海口'],
        };
    },
    methods: {
        showAddress() {
            this.showAddr = true;
        },
        close() {
            this.showAddr = false;
        },
        pulldown() {
            this.pullhasdown = !this.pullhasdown;
        }
    }
};
</script>


<style lang="postcss">
    @import 'css/variables.css';
    #nav{
        padding: 10px;
        line-height: 40px;
        background: #178067;
        margin-top: 30px;
        dd{display: inline-block;
            vertical-align: top;
            position: relative;
            margin: 0 30px;
        }
        dd > a{position: relative;
            z-index: 102;
            display: inline-block;
            vertical-align: top;
            text-align: center;
            padding: 0 20px;
            color: #fff;
            border-radius: 20px;
            font-weight: bold;
            text-decoration: none;
            transition: background .2s;
            &.active, &:hover{
                background: #FDD001;

            }
        }
        dd:hover{
            .subMenu{
                display: block;
            }
        }
        .subMenu{
            display: none;
            position: absolute;
            top:0; left: 50%;
            z-index: 100;
            transform: translateX(-50%);
            padding-top: 70px;
            &:before, &:after{
                content: '';
                position: absolute;
                top: 63px;
                left: 50%;
                margin-left: -7px;
                border-bottom: 7px solid #fff;
                border-left: 7px solid transparent;
                border-right: 7px solid transparent;
            }
            a{display: block;
                padding:0 40px;
                white-space: nowrap;
                color: #9B9B9B;
            }
        }
        .subMenu-down{
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 0 3px 1px rgba(210, 210, 210, .2);
        }
    }

    .poplayer{
        position: fixed;
        top:0; right: 0;
        bottom: 0;
        left: 0;
        z-index: 110;
        background: rgba(0, 0, 0, .6);
    }
    .addressList{
        width: 840px;
        position: absolute;
        top:50%; left:50%;
        transform: translate(-50%, -50%);
    }
    .addr-header{
        height: 80px;
        line-height: 80px;
        text-align: center;
        background: #178067;
        @extend %YaHeiUI-bold;
        position: relative;
        font-size: 24px;
        color: #fff;
    }
    .addr-close{
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: url('../../images/off_icon.png') no-repeat 50% 50%;
        cursor: pointer;
    }
    .addr-body{
        padding: 40px 30px;
        line-height: 50px;
        overflow: hidden;
        text-align: center;
        background: #fff;
        li{width: 130px;
            height: 50px;
            float: left;
            background: #EDEDED;
            font-size: 18px;
            @extend %YaHeiUI;
            color: #4A4A4A;
            margin: 0 12px 30px;
            cursor: pointer;
        }
    }

    @media screen and (max-width: 420px) {
        #nav{
            position: fixed;
            top:60px; left:0;
            right:0; z-index: 200;
            padding:0;
            margin:0;
            display: none;
            .layout-wrap{
                position: fixed;
                top: 60px; right: 0;
                left: 0; bottom: 0;
                background: rgba(0, 0, 0, .6);
            }
            dd, dd > a{margin:0;
                display: block;
                background: #fff;
                @extend %YaHeiUI;
            }
            dd > a{
                line-height: 50px;
                font-size: 15px;
                color: #4A4A4A;
                padding:0 40px;
                text-align: left;
                border-radius:0;
                &:hover{
                    background: none;
                }
            }
            .pull-group{
                background: #F9F9F9;
                & > a{background: #F9F9F9 !important;
                    @extend %YaHeiUI-bold;
                    color: #107b62;
                }
                &:after{
                    content:'';
                    position: absolute;
                    right:20px;
                    top:20px;
                    z-index: 110;
                    border-top: 7px solid #D8D8D8;
                    border-left: 7px solid transparent;
                    border-right: 7px solid transparent;
                    transition: transform .2s;
                }
                &.pulldown{
                    &:after{transform: rotate(180deg);}
                    .subMenu{display: block!important;}
                }
            }
            .subMenu{
                display: none!important;
                padding: 0;
                position: static;
                transform: translateX(0);
            }
        }
    }
</style>
